<template>
    <DialogComponent class="custom-dialog" :layer="dialogParams" @update:visible="closeAcountDialog" @confirm="confirmAcountDialog">
        <div>
            <el-form :model="filter" class="demo-form-inline">
                <el-form-item label="角色名称：">
                    <el-input v-model="filter.user" placeholder="请输入" />
                </el-form-item>
            </el-form>
            <table-wrap hideHeader title="角色列表" :total="total"
                :loading="loading" :pageSize="requestData.pageSize" :noSelection="false"
                :pageIndex="requestData.pageIndex" :tableData="tableData" @request-list="getList" class="mt20">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%" :row-key="getRowKeys"
                >
                    <el-table-column prop="id" min-width="140" label="序号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" min-width="140" label="角色代码" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="username" min-width="140" label="角色描述" show-overflow-tooltip></el-table-column>
                </el-table>
        </table-wrap>
        </div>
    </DialogComponent>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import DialogComponent from '@/components/dialogComp.vue'
import TableWrap from '@/components/table-wrap/table-wrap.vue'
import { Search } from '@element-plus/icons-vue'
export default {
    components: { DialogComponent, TableWrap },
    props: {
        dialogParams: {
            type: Object,
            default: () => {
                return {}
            },
            required: true
        },
        account: {
            type: Object,
            default: () => {
                return null
            }
        }
    },
    emits: ['dialog:confirm', 'dialog:close'],
    setup(props, ctx) {
        const store = useStore()
        const { account } = toRefs(props)
        console.log('account', account, account.value)
        const filter = reactive({
            user: '',
            phone: '',
            status: 0
        });
        const multipleTable = ref()
        const keyword = ref('')
        const tableData = ref([{
            id: 1001,
            name: '张三',
            username: 'zhangsan'
        }]);
        const total = ref(0);
        const loading = ref(false)
        const requestData = ref({
            pageIndex: 1,
            pageSize: 20
        });
        const multipleSelection = ref([])
        const handleSelectionChange = (selection) => {
            console.log('selection', selection)
            multipleSelection.value = selection
        }
        const getRowKeys = (row) => {
            return row.id;
        }
        // 列表
        const getList = () => {
            loading.value = true;
            multipleTable.value && multipleTable.value.clearSelection()

            // const {name='', institutionName='', expertise=''} = filterParams.value

            store.dispatch('proxyAction', {
                name: 'listExpertInfo',
                data: {
                    ...requestData.value
                    // ...filterParams.value,
                    // name: name.trim(),
                    // institutionName: institutionName.trim(),
                    // expertise: expertise.trim()
                }
            }).then((res) => {
                tableData.value = res.data.rows || [];
                total.value = res.data.total;
            }).finally(() => {
                loading.value = false;
            })
        }
        // 关闭添加账号对话框
        const closeAcountDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:close')
        }
        // 账号对话框confirm
        const confirmAcountDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:confirm')
        }
        const del = (item, index) => {
            console.log('index', index)
            multipleSelection.value.splice(index, 1)
            multipleTable.value.toggleRowSelection(item, undefined)
        }
        const toggleSelection = (rows) => {
            console.log('rows', rows)
            if (rows) {
                rows.forEach((row) => {
                    multipleTable.value.toggleRowSelection(row, undefined)
                })
            }
        }
        return {
            Search,
            filter,
            keyword,
            multipleTable,
            tableData,
            total,
            loading,
            requestData,
            multipleSelection,
            handleSelectionChange,
            getList,
            getRowKeys,
            closeAcountDialog,
            confirmAcountDialog,
            del
        };
    }
}
</script>
<style lang="scss" scoped>
.w200 {
    width: 200px;
}
.mr0 {
    margin-right: 0;
}
.mt20 {
    margin-top: 20px;
}
.search-input {
    width: 270px;
}
</style>